<html>

<head>
    <script type="application/javascript">
        function draw() {
            var canvas = document.getElementById("canvas");

            var ctx = canvas.getContext("2d");
            //绘制矩形
            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fillRect(10, 10, 200, 200);
            //绘制半透明矩形
            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect(100, 100, 400, 400);
            //绘制线段
            for (var i = 0; i < 400; i += 50) {
                ctx.moveTo(i, 0);
                ctx.lineTo(i, 10);
            }
            ctx.stroke();
        }
    </script>
</head>

<body onload="draw();">
    <canvas id="canvas" width="550" height="550"></canvas>
</body>

</html>